let layer = layui.layer
let form = layui.form
let laypage = layui.laypage;

// 获取文章列表下拉框

axios.get('/my/article/cates').then(({ data: { data } }) => {
  // console.log(res)
  $('[name="cate_id"]').append(data.map(({ name, Id }) =>
    `<option value="${Id}">${name}</option>`
  ).join(''))

  form.render('select')//刷新select选择框渲染
})



// 富文本编辑器
const E = window.wangEditor
const editor = new E('#contentBox')
editor.config.zIndex = 1
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()



// 更换图片裁剪效果
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
  aspectRatio: 400 / 280,
  preview: '.preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)

// 点击·选择封面·弹出框，用户选择文件
$('#btnChooseCoverImage').on('click', () => {
  $('#fileCover').click()
})
// 给文件域注册change事件，更换裁切区域的图片
$('#fileCover').on('change', function () {
  // 1. 找到选择的图片（文件对象）
  let file = this.files[0]; // 我们选择的图片的文件对象

  if (!file) {
    return layer.msg('请选择文件')
  }
  // 2. 根据文件对象，生成一个临时的url，用于访问被选择的图片
  let url = URL.createObjectURL(file)

  // 3. 更换剪裁区的图片的src属性
  // - 销毁原理的剪裁区
  // - 更换图片
  // - 重新创建剪裁区
  $image.cropper('destroy').attr('src', url).cropper(options);
});



// 决定文章的状态是已发布，还是草稿
let state  //变量state来存储文章的状态（已发布、草稿）
$('#btnPublish').on('click', () => { state = '发布' })
$('#btnSave').on('click', () => { state = '草稿' })



// 获取表单数据
$("#form").on('submit', function (e) {
  e.preventDefault()
  let fd = new FormData(this)

  // 收集到了富文本编辑器内容
  fd.append('content', editor.txt.html())


  // 收集文章的状态
  fd.append('state', state)

  // 收集封面数据
  $image
    .cropper('getCroppedCanvas', {
      // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function (blob) {
      // 将 Canvas 画布上的内容，转化为文件对象
      // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
      // console.log(blob)
      fd.append('cover_img', blob)
      // 不是必备的代码=>做个检测
      // fd.forEach((value, name) => console.log(value, name))

      // 在这发送ajax请求=>才把数据完整的收集到了
      axios.post('/my/article/add', fd).then(({ data: { status, message } }) => {
        // console.log(res)
        if (status !== 0) {
          return layer.msg(message)
        }
        layer.msg(message,
          { time: 2000 }, //(如果不配置，默认是3秒)
          function () {
            location.href = '/article/art_list.html'
          })
      })
      
    })
})


